<template>
  <div>
    <div class="set">
      <template>


        <el-tabs :tab-position="tabPosition" >
          <el-tab-pane label="首页配置">
            <div class="form">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="190px" class="demo-ruleForm">
                <el-form-item label="新品首发栏目商品显示数量" prop="name">
                  <el-input v-model="ruleForm.litemall_wx_index_new"></el-input>
                </el-form-item>
                <el-form-item label="人气推荐栏目商品显示数量" prop="name">
                  <el-input v-model="ruleForm.litemall_wx_index_hot"></el-input>
                </el-form-item>
                <el-form-item label="品牌制造商直供栏目品牌商显示数量" prop="name">
                  <el-input v-model="ruleForm.litemall_wx_index_brand"></el-input>
                </el-form-item>
                <el-form-item label="专题精选栏目显示数量" prop="name">
                  <el-input v-model="ruleForm.litemall_wx_index_topic"></el-input>
                </el-form-item>
                <el-form-item label="分类栏目显示数量" prop="name">
                  <el-input v-model="ruleForm.litemall_wx_catlog_list"></el-input>
                </el-form-item>
                <el-form-item label="分类栏目商品显示数量" prop="name">
                  <el-input v-model="ruleForm.litemall_wx_catlog_goods"></el-input>
                </el-form-item>
              </el-form>
            </div>


          </el-tab-pane>
          <el-tab-pane label="其他配置" style="padding-left: 195px;"><span>商品分享功能</span><br><el-switch
            style="display: block"
            v-model=ruleForm.litemall_wx_share
            >
          </el-switch></el-tab-pane>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="190px" class="demo-ruleForm">
          <el-form-item label="" prop="name">
            <el-row>
              <el-button size="mini">取消</el-button>
              <el-button type="primary" size="mini" @click="change">确定</el-button>
            </el-row>
          </el-form-item>
        </el-form>
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
import { yonghu,yonghu2 } from '@/api/pzgl/xcxpz.js';
export default {
  name: 'DocumentsWx',

  data() {
    return {
      tabPosition: 'left',
      ruleForm:{
        litemall_wx_index_new:'',
        litemall_wx_index_hot:"",
        litemall_wx_index_brand:"",
        litemall_wx_index_topic:'',
        litemall_wx_catlog_list:"",
        litemall_wx_catlog_goods:'',
        litemall_wx_share:false,

      },


      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
      }
    };
  },

  mounted() {
    this.show()
  },

  methods: {
    change(){
      yonghu2({...this.ruleForm}).then((res)=>{
        console.log(res);
        // this.ruleForm=res.data
      })
    },
    show(){
      yonghu().then((res) => {
        console.log(res);
        const data = res.data;
        data.litemall_wx_share = data.litemall_wx_share === 'true';
        this.ruleForm = data;
      });
    }
  },
};
</script>
<style scoped></style>